<template>
    <div class="tmpl">
        <div class="mui-content" style="background-color:#fff">
            <ul class="mui-table-view mui-grid-view">
                <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in list">
                    <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
                        <img class="mui-media-object" :src='item.img_url'>
                        <div class="mui-media-body" v-text='item.title'></div>
                    </router-link>
                    <div class="desc">
                        <p><span class="price" v-text="item.sell_price"></span><span class="priced" v-text="item.market_price"></span></p>
                        <p><span class="hot">热卖中</span><span class="right">剩余:{{item.stock_quantity}}</span></p>
                    </div>
                </li>
            </ul>
            <mt-button type='danger' size='large' plain @click='getmore' v-text='loading'></mt-button>
        </div>
    </div>
</template>
<script>
    import common from '../../kits/common.js';
    export default {
        data(){
            return{
                pageid:1,
                list:[],
                loading:'加载更多'
            }
        },
        created(){
            this.getgoods(this.pageid);
        },
        methods:{
            getgoods(pageid){
                var url = common.apidomain + '/api/getgoods?pageindex='+pageid;
                this.$http.get(url).then(res=>{
                    if(res.body.status!=0){
                        alert(res.body.message);
                        return;
                    }
                    if(res.body.message.length<=0){
                        this.loading='已经到底了';
                        return;
                    }
                    this.list = this.list.concat(res.body.message);
                })
            },
            getmore(){
                this.pageid++;
                this.getgoods(this.pageid);
            }
        }
    }   
</script>
<style scoped>
    .mui-content ul{
        padding-right:0px;
        overflow: hidden;
    }
    .mui-content .mui-table-view-cell{
        border-right: 1px solid gray;
        border-bottom: 1px solid gray;
        padding: 10px;
        margin: 0;
        
    }
    .mui-content li:nth-child(2n){
        border-right: none;
    }
    .desc{
        background-color: rgba(0, 0, 0, .2);
        padding: 5px 20px;
    }
    .desc p{
        overflow: hidden;
    }
    .desc .price{
        float: left;
        color: red;
    }
    .desc .priced{
        float: right;
        text-decoration: underline;
        /*font-weight: normal;*/
        color: gray;
        text-decoration: line-through;
    }
    .desc .hot{
        color: rgb(255, 33, 10);
        float: left;
    }
    .desc .right{
        float: right;
    }

</style>